import React from 'react';
import { Button, Icon } from '../../components';
import { LocaleProvider } from '../../components';
import './style/button.scss';

export default function ButtonView() {
  const { T } = React.useContext(LocaleProvider.LocaleContext);

  return (
    <div className="button-view">
      <h2>按钮组件</h2>
      <div className="line button-large">
        <span>{T('site.button.description.large')}</span>
        <Button type="primary" size="large">
          {T('button.example.primary')}
        </Button>
        <Button type="secondary" size="large">
          {T('button.example.secondary')}
        </Button>
        <Button type="ghost" size="large">
          {T('button.example.ghost')}
        </Button>
        <Button type="link" size="large">
          {T('button.example.link')}
        </Button>
        <Button type="text" size="large">
          {T('button.example.text')}
        </Button>
      </div>

      <div className="line button-middle">
        <span>{T('site.button.description.middle')}</span>
        <Button type="primary">{T('button.example.primary')}</Button>
        <Button type="secondary">{T('button.example.secondary')}</Button>
        <Button type="ghost">{T('button.example.ghost')}</Button>
        <Button type="link">{T('button.example.link')}</Button>
        <Button type="text">{T('button.example.text')}</Button>
      </div>

      <div className="line button-disabled">
        <span>{T('site.button.description.disabled')}</span>
        <Button type="primary" disabled>
          {T('button.example.primary')}
        </Button>
        <Button type="secondary" disabled>
          {T('button.example.secondary')}
        </Button>
        <Button type="ghost" disabled>
          {T('button.example.ghost')}
        </Button>
        <Button type="link" disabled>
          {T('button.example.link')}
        </Button>
        <Button type="text" disabled>
          {T('button.example.text')}
        </Button>
      </div>
      <div className="line button-disabled">
        <span>{T('site.button.description.icon')}</span>
        <Button type="text" icon={<Icon type="icon-zan" />}>
          {T('site.button.demo.dianzan')}
        </Button>
        <Button type="text" disabled icon={<Icon type="icon-shanchu" />}>
          {T('site.button.demo.delete')}
        </Button>
      </div>
    </div>
  );
}
